<template>
  <div>
    <van-nav-bar title="地区" left-arrow   @click-left="onClickLeft">
      <template #right >
        <span id="s" @click="preserve">保存</span>
      </template>
    </van-nav-bar>
    <div class="personData-position">
    
    <div class="personData-position-province">
      <van-field v-model="province" label="省" label-width="25px" />
    </div>
    <div class="personData-position-city">
      <van-field v-model="city" label="市" label-width="25px" />

    </div>
    
    
  </div>
  </div>
  
</template>

<script>
export default {
  data(){
    return {
      position:{
        // 省
        province: '',
        // 城市
        city:'',
      },
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push('/privateData')
    },
    // 保存修改的地区
    preserve(){
      this.$toast.loading('保存中...');
        setTimeout(() => {
        this.$toast.clear();
        this.$store.dispatch('getPosition',this.position);
        this.$router.push('/privateData')
      },300);
      this.$router.push('/privateData')
    },
  },
}
</script>

<style lang="less">
#s{
  width: 60px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  // font-family: Microsoft Yahei;
}
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
    
  }
  .personData-position {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 10px;
    .personData-position-province {
      width: 50%;
    }
    .personData-position-city {
      width: 50%;
    }
  }
</style>